<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算属性</title>
    </head>
    <body>
        <script src="../libs/vue.js" charset="utf-8"></script>
        <!-- 计算属性 -->
        <!-- <div id="app">
            a = {{ a }}, b = {{ b }}
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    a: 1
                },
                computed: {
                    b: function() {
                        return this.a + 1;
                    }
                }
            });
            console.log(vm.a, vm.b);
        </script> -->

        <!-- 计算属性 vs $watch -->
        <!-- <div id="demo">{{fullName}}</div>
        <script>
            var vm = new Vue({
                el:"#demo",
                data: {
                    firstName: 'Foo',
                    lastName: 'Bar',
                    fullName: 'Foo Bar'
                }
            })

            vm.$watch('firstName', function(val) {
                this.fullName = val + ' ' + this.lastName
            })

            vm.$watch('lastName', function(val) {
                this.fullName = this.firstName + ' ' + val
            })
        </script> -->



    </body>
</html>
